<template>
    <div style="position: relative;height: 40%;margin-bottom: 15px;">
    <span class="recognition" style="position: absolute;top: 18px;left: 15px;z-index: 999;"></span>
    <div id="echartPatientsTreated" class="echarts-style-PatientsTreated">
    </div>
  </div>
</template>

<script>
export default {
    props: ["PatientsTreated"],
    data(){
        return{
myChart1:null,
      option: {
        color: ["#2399EF"],
             legend: {
          show: true,
          left: "50%", //组件离容器左侧的距离,'left', 'center', 'right','20%'
          top: "12", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
          textStyle: {
            fontSize: 12,
            color: "#FFFFFF",
          },
        },
              tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
             grid: {
          left: "3%",
          right: "4%",
          bottom: "7%",
          containLabel: true,
        },
        title: [
          {
            text: `年度治疗人次统计`,
            left: 30,
            textStyle: {
              fontWeight: 400,
              lineHeight: 34,
              color: "#FFF",
              fontSize: 16,
            },
          },
        ],
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          axisTick: {
            alignWithLabel: true,
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#FFF", //Y轴内容文字颜色
            },
          },
          axisLine: {
            //y轴线的配置
            show: false, //是否展示
            // lineStyle: {
            //     color: "#ECEDF0",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
            //     width: 1,//y轴线的宽度
            //     type: "solid"//y轴线为实线
            // },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: [
     
            ],
            type: "line",
            smooth: true,
            name:"今年",
  
          },
          //         {
          //   data: [
          //     70, 932, 901, 934, 1290, 130, 130, 850, 932, 901, 934, 1290,
          //     130,
          //   ],
          //   type: "line",
          //   smooth: true,
          //   name:"上年",
 
          // },
        ],
      },
        }
    },


watch: {
      PatientsTreated: {
        handler(newVal, oldName) {
            let dataList = []
            let xList = []
            let data = [...newVal]
            xList = data.map(item => {
              dataList.push({
                value: item.ct,
                name: item.model
              })
              return item.model.split('-')[1]+'月'
            })
          let valueSetValue=[0,0,0,0,0,0,0,0,0,0,0,0]
          let dataArray=["01","02","03","04","05","06","07","08","09","10","11","12"]
            var dataLet=new Date()
            var year=dataLet.getFullYear()
          for(var i=0;i<dataList.length;i++){
              for (var ii=0;ii<dataArray.length;ii++){
                if(dataList[i]["name"]===year+"-"+dataArray[ii]){
                  valueSetValue[ii]=dataList[i]["value"]
               }
              } 
          }
            this.option.series[0].data = valueSetValue
            this.myChart1 && this.myChart1.setOption(this.option);
        },
        //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
        immediate: true,
        deep: true // 开启深度监听，默认是false
      },
    },


      mounted() {
    let that = this;
    this.initDeviceEcharts();
    window.addEventListener("resize", () => {
      // console.log("myChart1")
      that.myChart1.resize();
    });
  },
  methods: {
    initDeviceEcharts() {
      var chartDom = document.getElementById("echartPatientsTreated");
      this.myChart1 = this.$echarts.init(chartDom);

      this.myChart1.setOption(this.option);
    },
  },
}


</script>

<style>
.echarts-style-PatientsTreated {
  width: 100%;
  height: 100%;
  background-color: #072e5f;
  border: 1px solid #072e5f;
  padding: 6px;
  border-radius: 8px;
}
</style>